<template>
  <div class="apply_setting vh100 flau">
    <div class="bg_fff setting_wrap">
      <div class="h52 bkb_f3 flvcbt">
        <div>
          <span class="star">*</span>
          <span class="dx_15">剧本名称</span>
        </div>
        <div class="color_333">{{ scriptName }}</div>
      </div>
      <div class="h52 bkb_f3 flvcbt">
        <div>
          <span class="star">*</span>
          <span class="dx_15">联系电话</span>
        </div>
        <div>
          <van-field v-model="settingParams.contactMobile" type="tel" input-align="right" placeholder="请输入联系电话" />
        </div>
      </div>
      <div class="h52 bkb_f3 flvcbt">
        <div>
          <span class="star">*</span>
          <span class="dx_15">申领长图</span>
        </div>
        <div>
          <van-uploader 
            :file-list="fileList" 
            :show-upload="fileList.length < 1"
            preview-size="40px" 
            bind:delete="onDelImg"
            bind:after-read="onAfterRead"
          />
        </div>
      </div>
      <div class="h52 bkb_f3 flvcbt">
        <div>
          <span class="star">*</span>
          <span class="dx_15">申领状态</span>
        </div>
        <div class="fl vc" @click="showStatus = true">
          <span class="dx_15 mr8" :class="(settingParams.applicationSwitch || settingParams.applicationSwitch === 0 ) ? '' : 'color_999'">{{ applyStatusName }}</span>
          <img src="@/assets/images/icon_down.png" class="img16" />
        </div>
      </div>
      <div class="h52 bkb_f3 flvcbt">
        <div>
          <span class="star">*</span>
          <span class="dx_15">申领类型</span>
        </div>
        <div class="fl vc" @click="showType = true">
          <span class="dx_15 mr8" :class="(!settingParams.applicationType && settingParams.applicationType !== 0 ) ? 'color_999' : ''">{{ applyTypeName }}</span>
          <img src="@/assets/images/icon_down.png" class="img16" />
        </div>
      </div>
    </div>
    <!-- 申领状态 -->
    <van-popup v-model="showStatus" get-container="body" position="bottom">
      <van-picker :columns="applyStatusList" show-toolbar :value-key="$attrs.value" :title="$attrs.text" @cancel="showStatus = !showStatus" @confirm="onConfirmStatus"></van-picker>
    </van-popup>
    <!-- 申领状态 -->
    <van-popup v-model="showType" get-container="body" position="bottom">
      <van-picker :columns="applyTypeList" show-toolbar :value-key="$attrs.value" :title="$attrs.text" @cancel="showType = !showType" @confirm="onConfirmType"></van-picker>
    </van-popup>
  </div>
</template>

<script>
import { Field } from 'vant';
import { Picker } from 'vant';
import { Uploader } from 'vant';

export default {
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
  },

  data() {
    return {
      scriptId: '',
      scriptName: '',
      settingParams: {
        contactMobile: '', // 联系电话
        applicationImageUrl: '', // 申领图片url
        applicationType: '', // 申领类型 0免费 20付费
        scanChannelQrcodeAutoReceiveSwitch: 1, //
        applicationSwitch: '', // 0 关闭申领 10开启申领  20待申请
        benefitBatchId: '',
        topUpDesc: '',
        applicationPrice: '',
        benefitBatchIdObj: '',
        agreement: '',
        skipType: 0, // 0不跳转 1 跳转小程序
        skipUrl: '',
      },
      fileList: [],

      applyStatusName: '开启申领/待申领/关闭申领',
      applyStatusList: [
        {
          value: 10,
          text: '开启申领'
        },
        {
          value: 0,
          text: '待申领'
        },
        {
          value: 20,
          text: '关闭申领'
        }
      ],
      showStatus: false,

      applyTypeName: '免费申领/充值申领',
      applyTypeList: [
        {
          value: 0,
          text: '免费申领'
        },
        {
          value: 20,
          text: '充值申领'
        }
      ],
      showType: false,
    };
  },

  created() {
    this.scriptId = this.$route.query.id
    this.scriptName = this.$route.query.name
  },

  methods: {
    
    // 图片上传
    async onAfterRead(e) {
      console.log(e)
      // const _this = this
      // const { file } = e.detail
      // const host = `https://${ossFormData.bucketName}.${ossFormData.endpoint}`
      // file.forEach(item => {
      //   _this.fileList.push({
      //     url: `${host}/${key}`
      //   })
      // })
    },

    onConfirmStatus(obj) {
      this.showStatus = false
      this.applyStatusName = obj.text
      if (this.settingParams.applicationSwitch != obj.value) {
        this.settingParams.applicationSwitch = obj.value
      }
    },

    onConfirmType(obj) {
      console.log(obj)
      this.showType = false
      this.applyTypeName = obj.text
      if (this.settingParams.applicationType != obj.value) {
        this.settingParams.applicationType = obj.value
      }
    },

    // 删除图片
    onDelImg(e) {
      console.log(e);
      this.fileList.splice(e.detail.index, 1)
    },
  }
};
</script>

<style lang="less">
.apply_setting {
  padding: 14px 20px 34px 20px;
  .setting_wrap {
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    padding: 0 16px;
  }
  .van-field {
    padding: 0;
    font-size: 15px;
  }
  .van-uploader__upload {
    margin: 0;
  }
}
.h52 {
  height: 52px;
}
.bkb_f3{
  border-bottom:1px solid #f3f3f3;
}

</style>
